<template>
    <div class="comment" v-if="type == 1">
        <div class="commentTitle">
            讨论区<span>{{ count | changeCount }}</span>
        </div>
        <div class="commentContent">
            <ul class="ccList">
                <li v-for="(item, index) in sList" :key="index">
                    <div class="ccTitle">
                        <div class="ccTitleImg">
                            <img :src="item.member.avatar" alt="" />
                        </div>
                        <div class="ccTitleText">
                            <p>{{ item.member.uname }}</p>
                            <p>{{ item.member.sex }}</p>
                        </div>
                    </div>
                    <div class="ccContent">{{ item.content.message }}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { reply } from "../request";
export default {
    name: "comment",
    props: ["detailsId"],
    data() {
        return {
            commentList: [],
            sList: [],
            count: 0,
            type: 1,
        };
    },
    filters: {
        changeCount(value) {
            return (value / 10000).toFixed(2) + "w";
        },
    },
    methods: {
        getComment() {
            let index = this.$route.query.id;
            reply({ oid: index }).then((data) => {
                this.commentList = data.data;

                if (data.code == 0) {
                    this.count = this.commentList.page.acount;
                    this.sList = this.commentList.replies.filter((item, index) => {
                        return index < 7;
                    });
                } else {
                    this.type = 0;
                }
            });
        },
    },
    created() {
        this.getComment();
    },
};
</script>

<style lang="scss" scope>
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";
::-webkit-scrollbar {
    display: none;
    width: 0;
}
.comment {
    height: 4.2667rem;
    width: 100%;
}
.commentTitle {
    height: 0.5333rem;
    margin: 0.4267rem 0;
    span {
        margin-left: 0.2667rem;
    }
}

.commentContent {
    height: 3.3067rem;
    overflow-x: scroll;

    .ccList {
        display: flex;
        width: 530%;
        li {
            height: 2.5067rem;
            width: 6.0267rem;
            padding: 0.2933rem;
            border: 1px whitesmoke solid;
            margin-left: 0.2667rem;
            .ccTitle {
                height: 0.9333rem;
                display: flex;
                align-items: center;
                .ccTitleImg {
                    height: 0.8533rem;
                    width: 0.8533rem;
                    margin-left: 0.1067rem;
                    overflow: hidden;
                    border-radius: 50%;

                    img {
                        width: 100%;
                        border-radius: 50%;
                    }
                }
                .ccTitleText {
                    margin-left: 0.2133rem;
                    height: 0.8533rem;
                    p {
                        font-size: 0.2rem;
                        padding: 0;
                        line-height: 0.32rem;
                    }
                }
            }
            .ccContent {
                margin-top: 0.1rem;
                height: 1.44rem;
                font-size: 0.32rem;
                color: $color;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                line-height: 0.36rem;
            }
        }
    }
}
</style>
